<template>
    <el-form-item>
        <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">销售记录表单</h2>
    <table class="order-table">
        <tr>
            <th colspan="6" style="text-align: left;">基本信息</th>
        </tr>
        <tr>
            <td>销售日期：</td>
            <td><el-date-picker v-model="form.saleDate" type="date" placeholder="Pick a date" style="width: 100%" />
            </td>
            <td>客户名称：</td>
            <td>
                <el-select v-model="form.customerName" placeholder="请选择客户名称">
                    <el-option label="秦卓珈" value="秦卓珈" />
                    <el-option label="韩一芳" value="韩一芳" />
                    <el-option label="刘志宝" value="刘志宝" />
                    <el-option label="申莹洋" value="申莹洋" />
                    <el-option label="周岚青" value="周岚青" />
                    <el-option label="徐如华" value="徐如华" />
                    <el-option label="张淑馨" value="张淑馨" />
                    <el-option label="郭银汝" value="郭银汝" />
                    <el-option label="屈语盼" value="屈语盼" />
                    <el-option label="柳泳辉" value="柳泳辉" />
                </el-select>
            </td>
        </tr>
        <tr>
            <td>产品名称：</td>
            <td>
                <el-select v-model="form.productName" placeholder="请选择产品名称">
                    <el-option label="雪花勇闯天涯" value="雪花勇闯天涯" />
                    <el-option label="青岛啤酒" value="青岛啤酒" />
                    <el-option label="科罗娜" value="科罗娜" />
                    <el-option label="老米勒" value="老米勒" />
                    <el-option label="百威" value="百威" />
                    <el-option label="喜力" value="喜力" />
                    <el-option label="嘉士伯" value="嘉士伯" />
                    <el-option label="凯旋1664" value="凯旋1664" />
                    <el-option label="福佳白" value="福佳白" />
                    <el-option label="教士(白啤)" value="教士(白啤)" />
                    <el-option label="教士(黑啤)" value="教士(黑啤)" />
                    <el-option label="燕京鲜啤" value="燕京鲜啤" />
                    <el-option label="燕京U8" value="燕京U8" />
                    <el-option label="哈尔滨啤酒" value="哈尔滨啤酒" />
                    <el-option label="乌苏" value="乌苏" />
                </el-select>
            </td>
            <td>销售数量：</td>
            <td><el-input v-model="form.saleSum" placeholder="请输入销售数量"/></td>
        </tr>
        <tr>
            <td>销售单价：</td>
            <td><el-input v-model="form.salePrice"  placeholder="请输入销售单价"/></td>
            <td>销售额：</td>
            <td><el-input v-model="form.sales"  placeholder="请输入销售额" :disabled="true"/></td>
        </tr>
        <tr>
            <td>销售人员：</td>
            <td><el-input v-model="form.salespeople" disabled/></td>
            <td>销售渠道：</td>
            <td>
                <el-select v-model="form.salesChannels" placeholder="请选择销售渠道">
                    <el-option label="便利店" value="便利店" />
                    <el-option label="超市" value="超市" />
                    <el-option label="餐厅" value="餐厅" />
                    <el-option label="酒吧" value="酒吧" />
                    <el-option label="大排档" value="大排档" />
                    <el-option label="电商直播" value="电商直播" />
                    <el-option label="酒店" value="酒店" />
                    <el-option label="度假村" value="度假村" />
                    <el-option label="啤酒厂直销" value="啤酒厂直销" />
                    <el-option label="娱乐场所" value="娱乐场所" />
                    <el-option label="企业团购" value="企业团购" />
                </el-select>
            </td>
        </tr>
        <tr>
            <td>付款方式：</td>
            <td>
                <el-select v-model="form.paymentMethods" placeholder="请选择付款方式">
                    <el-option label="微信" value="微信" />
                    <el-option label="支付宝" value="支付宝" />
                    <el-option label="银行卡" value="银行卡" />
                    <el-option label="信用卡" value="信用卡" />
                    <el-option label="花呗" value="花呗" />
                    <el-option label="亲属卡" value="亲属卡" />
                </el-select>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td colspan="3"><el-input v-model="form.remark" type="textarea"  placeholder="请输入备注"/></td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch } from 'vue' // 确保引入了 watch
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

// do not use same name with ref
const form = reactive({
    saleDate: '',
    customerName: '',
    productName: '',
    saleSum: '',
    salePrice: '',
    sales: '',
    salespeople: store.counterStore.userName,
    salesChannels: '',
    paymentMethods: '',
    remark: ''
});

// 计算属性，自动计算销售额
const calculateSales = computed(() => {
    const sum = parseInt(form.saleSum, 10) || 0; // 确保第二个参数为基数，避免八进制转换问题
    const price = parseFloat(form.salePrice) || 0;
    return sum * price;
});

// 监听销售数量和销售单价的变化，更新销售额
watch(
    [() => form.saleSum, () => form.salePrice],
    () => {
        form.sales = calculateSales.value.toString();
    }
);

const onSubmit = () => {
    write.post("/f-write/api/Sale/CreateSale", form)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
                router.push('/QuerySales')
            }
            else {
                ElMessage.error(res.data.msg)
                return;
            }
        })
}

</script>

<style scoped>
.order-table {
    border-collapse: collapse;
    width: 100%;
}

.order-table th,
.order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.order-table th {
    background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
    padding: 20px;
}
</style>